<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

/* const animationDuration = 6000*/
import 'echarts-liquidfill/src/liquidFill.js' // 在这里引入
import { toFixed } from '@/utils/index'
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    liquidFill: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption(
        {
          title: {
            text: '好评率', // 主标题文本，支持使用 \n 换行
            bottom: '5%', // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
            left: 'center', // 值: 'left', 'center', 'right' 同上
            textStyle: { // 文本样式
              fontSize: 18,
              color: '#94e5ff'
            }
          },
          // 提示框组件
          tooltip: {
            trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            textStyle: {
              color: '#fff' // 文字颜色
            },
            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            // 水球图: {a}（系列名称），{b}（无），{c}（数值）
            // 使用函数模板   传入的数据值 -> value: number|Array,
            formatter: function(value) {
              var valuedata = toFixed(value.value * 100, 0)
              return value.seriesName + ': ' + valuedata + '%'
            }
          },
          series: [
            {
              type: 'liquidFill',
              name: '好评率', // 系列名称，用于tooltip的显示，legend 的图例筛选
              radius: '82%', // 水球图的半径
              center: ['50%', '40%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
              // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
              // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
              shape: 'circle',
              phase: 0, // 波的相位弧度 不设置  默认自动
              direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
              outline: {
                show: true,
                borderDistance: 0, // 边框线与图表的距离 数字
                itemStyle: {
                  opacity: 0.5, // 边框的透明度   默认为 1
                  borderWidth: 1, // 边框的宽度
                  shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                  shadowColor: '#407bf3', // 边框的阴影颜色,
                  borderColor: '#407bf3' // 边框颜色
                }
              },
              // 图形样式
              itemStyle: {
                color: '#284df3', // 水球显示的背景颜色
                opacity: 0.5, // 波浪的透明度
                shadowBlur: 10 // 波浪的阴影范围
              },
              backgroundStyle: {
                color: '#407bf3', // 水球未到的背景颜色
                opacity: 0.5
              },
              // 图形的高亮样式
              emphasis: {
                itemStyle: {
                  opacity: 0.8 // 鼠标经过波浪颜色的透明度
                }
              },
              // 图形上的文本标签
              label: {
                fontSize: 26,
                fontWeight: 600,
                color: '#adfafa'
              },
              data: [0.58] // 系列中的数据内容数组
            }
          ]
        }
      )
    }
  }
}
</script>

